<!DOCTYPE html>
<!DOCTYPE html>
<#assign ctx=request.contextPath />
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
		<title>服务人员详情</title>
		<link rel="stylesheet" href="${ctx}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${ctx}/assets/css/hook.css" />
		<link rel="stylesheet" href="${ctx}/assets/css/sco.message.css" />
	</head>
	<style>
	body{
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		font-family: "黑体"}
		.top{
			width: 100%;
			height: 30%;
			background-color: #06b9d9;
			text-align: center;

		}
		.head-portrait{
			margin-top:10%;
			width:4em;
			height: 4em;
		}
		.top h4{
			margin-top: 1%;
			color: #FFFFFF;
			margin-bottom: 1%;
			font-size: 15px;
		}
		.star{
			width: 86px; 
			height: 16px;
			padding-left: 0px;
			padding-right: 0px;
			
			line-height:0;
			margin: 0 auto;
			margin-bottom: 2%;
		}
		#nav-top{
			background-color: #02abc9;
		}
		#nav-top h5{
			color: #FFF;
		}
		#text-top{
		border-bottom: 1px solid #bfbfbf;
		}
		#nav{
			border-bottom: 1px solid #bfbfbf;
			height: 50px;
		}
		#botom{
			 position: absolute;
			 bottom: 2%;
			 color:#06b9d9;
		}
		.bottom-nav{
			 position: absolute;
			 bottom: 7%;
			 margin-left: 40%;
		}
		#footer {
    		position: fixed;
		    bottom:0px;
		    height:50px;
		    width:100%;
		}
		#foot{
			height: 60px;
		} 
	</style>
 	<body>
		<div class="hook" id="hook">
		</div>
		<div class="top">
			<#if photo??>
				<img src="${ctx}/upload/driver/${photo}" class="img-circle center-block" style="width: 80px; height: 80px;"/>		
			<#else>
				<img src="${ctx}/assets/img/xing.png" class="img-circle center-block" style="width: 80px; height: 80px;"/>
			</#if>
			<h4>${driverName}</h4>
			<div class="star">
				<div class="col-xs-12" style="padding-left: 0px; width: 85px; height: 16px; line-height:0;">
					<div class="col-xs-12" style="padding-left: 0px;width:${driverStar*120/5}%; height: 16px; background-color: red; line-height:0;">
						<img src="${ctx}/assets/img/xing.png" />
					</div>
				</div>
			</div> 
		</div>
		<div class="container-fluid">
			<div class="row" id="nav-top">
				<div class="col-xs-4">
					<h5>次数:${driverTimes}次</h5>
				</div>
				<div class="col-xs-4" style="text-align: center;">
					<h5>驾龄:${driverJialing}年</h5>
				</div>
				<div class="col-xs-4" style="text-align: right;">
					<h5>距离:${driverDistance}</h5>
				</div>
			</div>
		</div>
		<#if (page.content)?? >
			<div class="container-fluid">
				<div class="row" id="text-top">
					<div class="col-xs-12">
						<h4>客户评价(${total!'0'})</h4>
					</div>
				</div>
			</div>
		</#if>
		<#if (page.content)??	&& (page.totalElements>0)>
			<#list page.content as data>		
			<div class="container-fluid"  style="overflow:auto; ">
				<div class="row" id="nav">
					<div class="col-xs-8" style="margin-top: 5px;">
					
						<div class="col-xs-12" style="padding-left: 0px; width: 85px; height: 16px; line-height:0;">
							<div class="col-xs-12" style="padding-left: 0px;width:${data.starLevel*120/5}%; height: 16px; background-color: red; line-height:0;">
								<img src="${ctx}/assets/img/xing-2.png" />
							</div>
						</div>
						<div class="col-xs-12" style="padding-left: 0px;margin-top: 5px; ">
							<#if (data.content.length()>14)>
								${data.content?substring(0,14)}
							<#else>
								${data.content}
							</#if>
						</div>
					</div>
					<div class="col-xs-4" style="padding-left: 0px; text-align: right; margin-top: 5px;">
							${data.created?string("yyyy-MM-dd")}
					</div>
				</div>
			</div>
			</#list>
		
			<#if (page.totalElements>5)>
				<div style="text-align:center" id="loadmore">
					点击加载更多
				</div>
			<#else>
				<div style="text-align:center">
					没有更多评价了
				</div>
			</#if>
		<#else>
			<div style="text-align:center">
				暂无评价记录
			</div>
		</#if>
		<div id="foot"></div>	
		<div id="footer">
	     	<button type="button" class="btn btn-default btn-lg btn-block" id="botom">服务人员司机</button>
	   </div>
	</body>
</html>
<script src="${ctx}/assets/js/jquery-1.11.0.min.js"></script>
<script src="${ctx}/assets/js/bootstrap.min.js"></script>
<script src="${ctx}/assets/js/sco.message.js"></script>
<script src="${ctx}/assets/js/mousewheel.js"></script>
<script src="${ctx}/assets/js/hook.js"></script>
<script type="text/javascript">
window.daijia = {ctx:'${ctx}'};
</script>
<script src="${ctx}/assets/js/wxcommon.js"></script>
<script charset="utf-8" type="text/javascript">
	var telephone,wxuser;
	if(em.is_weixin()){
		var base_url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=${setting.wxAppId?if_exists}&redirect_uri="+URLEncode('${setting.wxServer?if_exists}m/driverDetails?driverId=${driverId?if_exists}&longitude=${lng?if_exists}&latitude=${lat?if_exists}')+"&response_type=code&scope=snsapi_base&state=null#wechat_redirect";
	
		var _obj = em.UrlGet();
		
		if(_obj.code){
			$.post('${ctx}/wx/v1/userInfo',{'code':_obj.code},function(data){
				if(data.object){
					wxuser=data.object.openId;
					telephone=data.object.phone;
				}
			},'json');
		}
		else{
			window.location.replace(base_url);
		}
	}
	
	$("#botom").bind('click',function(){
	
		$('#loadblacklayer').show();
		var longitude='${lng?if_exists}';
		var latitude='${lat?if_exists}';
		var id='${driverId?if_exists}';
		
		if(telephone!=null && $.trim(telephone)!=''){
			$.post('${ctx}/m/designatedDriver',{'longitude':longitude,'latitude':latitude,'phone':telephone,'driverId':id},function(data){
				if(data.success){
					$('#picture').attr('src','${ctx}/assets/img/1_08.png');
					calculagraph();
					$('#loadblacklayer').show();
					
				}else{
					$.scojs_message(data.message, $.scojs_message.TYPE_ERROY);
				}
			});	
		}else{
			window.location.href="${ctx}/wx/v1/bind?returnUrl="+URLEncode('${ctx}/m/driverDetails?driverId=${driverId?if_exists}&longitude=${lng?if_exists}&latitude=${lat?if_exists}')+"";
		}
	
	});
	
	var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0;
	var page = 0;
	
	function pullUpAction () {
		page=page+1;
		$.ajax({
             type: "POST",
             url: "${ctx}/m/rateData",
             data: {'driverId':'${driverId}','page':page,'limit':10},	
             dataType: "json",
             success: function(data){
             	if(null!=data){
             		var content="";
             		$.each(data, function (index,element){
             				
             				content+='<div class="row" id="nav">'+
             							'<div class="col-xs-8" style="margin-top: 5px;">'+
             								'<div class="col-xs-12" style="padding-left: 0px; width: 85px; height: 16px; line-height:0;">'+
             									'<div class="col-xs-12" style="padding-left: 0px;width:element.starLevel*100/5%; height: 16px; background-color: red; line-height:0;">'+
             										'<img src="${ctx}/assets/img/xing-2.png" />'+
             									'</div>'+
             								'</div>'+
             								'<div class="col-xs-12" style="padding-left: 0px; margin-top: 5px;">'+
             									element.content+
             								'</div>'+
             							'</div>'+
             							'<div class="col-xs-4" style="padding-left: 0px; text-align: right; margin-top: 5px;">'+
             								element.time+
             							'</div>'+
             						'</div>'
             					  
					});
             		$(".container-fluid").last().append(content);
             		
             		if(data.length<10){
             			$("#loadmore").html("没有更多数据");
             		}
             	}
             	else{
             		$("#loadmore").html("没有更多数据");
             	}
             }
    	});
	}
	
	
	function calculagraph(){
		var ctx=window.daijia.ctx
		var _btn= $('#writing');
		
		var time = 5;
		_btn.text('下单成功,'+time+"秒后返回上一级菜单");
							
		var	L = setInterval(function(){
		time--;
		_btn.text('下单成功,'+time+"秒后返回上一级菜单");
		if(time <= 0){
			window.location.href='${ctx}/m/loading'
		}
		},1000);
	};

	$(document).ready(function(){
	
		$('#hook').hook({
			reloadPage:false,
			reloadEl:function(){
				window.location.reload(true);
			}
		});
		
		$("#loadmore").click(function(){
			pullUpAction();
		});
	});

</script>




